<template>
  <transition name="fade2">
    <div id="goods" class="section" v-show="showGood" :class="[fun.getPhoneEnv() == 3 ? 'pcStyle' : '']">
      <U_backup :btnFlag="btnFlag" :id="1" :datas="btnData"></U_backup>
      <U_backup :btnFlag="true" :id="2" :datas="btnData2" :poster="1" @poster="postShow()" v-if="!this.$route.query.is_retail"></U_backup>
      <!-- 顶部导航标签 start -->
      <div id="hoid" @click="goto">
        <div class="back">
          <i class="iconfont icon-member-left"></i>
        </div>
      </div>
      <!-- 顶部导航标签 end -->

      <div ref="onePage" id="onePage" style="overflow: hidden; min-height: 100vh;">
        <div style="-webkit-overflow-scrolling: touch; min-height: 101vh;" id="main">
          <!-- 轮播图组件 商品视频、商品图片
            @props {thumb_url} 商品图片
            @props {thumb} 其他图片
            @props {goods_video} 商品视频
            @props {video_image} 视频封面
          -->
          <!-- <goodSwipe @setShowBigImg="setShowBigImg" :child_showBigImg="child_showBigImg" :thumb_url="goodsInfo.thumb_url || []" :thumb="goodsInfo.thumb" :goods_video="goodsInfo.goods_video" :video_image="goodsInfo.video_image"></goodSwipe> -->
          <GoodsSwiper :thumb_url="goodsInfo.thumb_url || []" :thumb="goodsInfo.thumb" :goods_video="goodsInfo.goods_video" :video_image="goodsInfo.video_image"></GoodsSwiper>
          <!-- 订单飘窗放在viewer标签里面 会把飘窗的会员头像放大预览 #59819 -->
          <float-order v-if="showGood" :broadcast_data="goods_plugin.broadcast_data || []" :goods_type="goods_type" :pluginName="goods_info.integral_name"></float-order>
          <!--
            内容：主要：（商品价格、标题、库存、销售、分享、海报、优惠券按钮、会员折扣、爱心值奖励 ）、其他（...）
            插件区别：1.酒店无需显示库存、销量，不显示优惠券按钮
                      2.拼团不显示价格(最低价在组件<countDown>里显示)，没有优惠券，库存不是商品库存(后台设置的活动库存)
          -->
          <priceTitleRepertorySales
            :loading="showGood"
            :btnFlag="btnFlag"
            :wx_video_link="wx_video_link"
            :goods_info="goods_info"
            :goods_type="goods_type"
            :isRent="isRent"
            ref="priceTitleRepertorySales"
            :favorite="favorite"
            @onFavorite="onFavorite"
            v-on:shareWeixin="shareWeixin"
          ></priceTitleRepertorySales>

          <!-- 一口价插件入口 跳转router-name:fixedPrice
               活动、参数、自购省、服务标签、应用市场
              备注: 1.门店插件只显示门店信息-->
          <selfParameterServicetag
            :hasActivity="hasActivity"
            :prdocut_market="prdocut_market"
            :plugindata="goods_plugin.pack_fixed_price"
            :loading="showGood"
            :goods_type="goods_type"
            :goods_info="goods_info"
            v-on:contorBuyNow_good="contorBuyNow_goodTap"
            ref="self"
          ></selfParameterServicetag>

          <!--群活码-->
          <div class="group-code" v-if="goods_plugin.group_code && goods_plugin.group_code.goods_entrance == 1">
            <div class="group-code-face" v-if="goods_plugin.group_code.code_logo">
              <img :src="goods_plugin.group_code.code_logo" alt="" />
            </div>
            <div class="group-code-content">
              <div class="group-code-name">{{ goods_plugin.group_code.code_title }}邀请您添加专属福利群！</div>
              <div class="group-code-desc">{{ goods_plugin.group_code.citation_copy }}</div>
            </div>
            <div class="group-code-button" @click="toGroupCode">去加群</div>
          </div>

          <!--微贴和直播-->
          <invitationAndLive
            class="invitationAndLive"
            :goods_info="goods_info"
            :min_micro="min_micro"
            :knowledgeList="knowledgeList"
            :recordsList="recordsList"
            :tabList="tabList"
            v-if="showGood && tabList.length > 0"
          ></invitationAndLive>

          <!-- 商品品牌  后台商品发布/编辑里设置 -->
          <div v-if="!this.fun.isTextEmpty(goodsInfo.has_one_brand)">
            <div class="brand" @click="toBrandDetail(goodsInfo.has_one_brand.id)">
              <ul class="logo">
                <li>
                  <img v-if="goodsInfo.has_one_brand&&goodsInfo.has_one_brand.logo" :src="goodsInfo.has_one_brand.logo" alt class="logo_img" />
                  <span>{{ goodsInfo.has_one_brand.name }}</span>
                </li>
                <li class="return">品牌介绍</li>
              </ul>
            </div>
          </div>

          <!-- 讲师介绍 -->
          <div v-if="goods_plugin.course_supply && goods_plugin.course_supply.lecturer" class="module-style">
            <div class="lecturer  flex" @click="gotoUrl('lecturer',{},{lecturerId: goods_plugin.course_supply.lecturer.lecturer_id})">
              <img :src="goods_plugin.course_supply.lecturer.pic" alt class="logo_img" />
              <div class="lecturer-main flex">
                <div class="flex" style="flex-wrap: wrap;">
                  <div class="name line-clamp-1">{{ goods_plugin.course_supply.lecturer.name }}</div>
                  <div class="lecturer-tag" v-for="(item,index) in goods_plugin.course_supply.lecturer.label" :key="index">{{item}}</div>
                </div>
                <div class="line-clamp-1" style="width: 100%; color: #898c91;">{{ goods_plugin.course_supply.lecturer.introduce }}</div>
              </div>
            </div>
          </div>

          <!-- 商品短视频文章 -->
          <relation v-if="goods_plugin.plugin_goods_relation" :info="goods_plugin.plugin_goods_relation"></relation>
          <!-- 商品短视频文章 end -->

          <van-tabs v-model="active" scrollspy sticky v-if="showGood && goods_plugin.course_supply">
            <van-tab title="目录">
              <div class="chapter-list">
                <p style="font-weight: bold; color: #1f1f1f; line-height: 2.375rem; text-align: left; padding: 0 0.6rem;">目录</p>
                <div class="title flex-j-sb">
                  <div>共{{goods_plugin.course_supply.chapter_count}}章，{{goods_plugin.course_supply.section_count}}小节</div>
                </div>

                <div class="chapter-content">
                  <van-collapse v-model="activeChapter"  :border="false" v-if="goods_plugin.course_supply.chapter.length > 0">
                    <block v-for="(item,index) in goods_plugin.course_supply.chapter" :key="index">
                      <van-collapse-item :name="item.chapter_id" :border="true">
                        <template #title>
                          <div class="flex-a-c">
                            <div class="play">
                              <span class="iconfont icon-course_play"></span>
                            </div>
                            <h3>{{item.name}}</h3>
                          </div>
                        </template>
                        <block v-for="(sectionItem,sectionIndex) in item.section" class="chapter-item" :key="sectionIndex">
                          <div class="flex-a-c content" @click.stop="sectionOn(item,sectionItem,index)">
                            <h3 class="line-clamp-2">{{sectionItem.name}}</h3>
                            <div class="examine flex-a-c flex-j-sb">
                              <div class="time flex-a-c">
                                <span class="iconfont icon-course_time" v-if="sectionItem.try_time !== 0 ||  sectionItem.video_second !== 0"></span>
                                <span v-if="goods_plugin.course_supply.is_buy">{{sectionItem.video_second|videoSecondTime}}</span>
                                <span v-else-if="!goods_plugin.course_supply.is_buy && !sectionItem.can_try">{{sectionItem.video_second|videoSecondTime}}</span>
                                <span v-else>{{sectionItem.try_time|videoSecondTime}}</span>
                              </div>
                              <template v-if="!goods_plugin.course_supply.is_buy">
                                <span class="iconfont icon-course_unlock" v-if="!sectionItem.can_try"></span>
                                <div class="try-and" v-else>试看</div>
                              </template>
                              <span class="iconfont icon-course_lock" v-else></span>
                            </div>
                          </div>
                        </block>
                      </van-collapse-item>
                    </block>
                  </van-collapse>
                  <van-empty description="暂无数据"  v-else/>
                </div>
              </div>

            </van-tab>
            <van-tab title="介绍">
              <div id="shopInfo" ref="goodinfo" class="module-style">
                <p style="font-weight: bold; color: #1f1f1f; line-height: 2.375rem; text-align: left; padding: 0 0.6rem;">介绍</p>
                <div id="tabs">
                  <div ref="goodPage" id="goodPage">
                    <div>
                      <div id="goods_content" v-html="goodDetail.content" @click="handleHtml($event)"></div>
                      <p v-if="fun.isTextEmpty(goodDetail.content)" style="color: #666;">暂无该商品详情 ~</p>
                    </div>
                  </div>
                </div>
              </div>
            </van-tab>
            <van-tab title="评价">
              <!-- 精选口碑 评论组件 -->
              <c-comment class="section"
                :commentInfo="commentLimit"
                :num="totalComment"
                :rate="favorable_rate"
                :is_show_default_praise="is_show_default_praise"
                :goods_id="this.$route.params.id"
                v-on:RouterTo="FromTo"
                v-show="goodsInfo.is_order_detail_comment_show == 1"
              ></c-comment>
            </van-tab>
            <van-tab title="推荐" v-if="showGood && goodDetail.show_push && goodDetail.show_push.length > 0">
              <!-- 猜你喜欢 开启方式：商品发布/编辑，营销挂件的推广商品选择 -->
              <guessLike
                :list="goodDetail.show_push"
                :word="goodsInfo.vip_level_status && goodsInfo.vip_level_status.word"
                :status="goodsInfo.vip_level_status"
                v-show="showGood && goodDetail.show_push && goodDetail.show_push.length > 0"
              ></guessLike>
            </van-tab>
          </van-tabs>
        </div>
      </div>
      <van-notice-bar
        mode="closeable"
        :class="[fun.isIphoneX() ? 'iphoneXStyle' : '']"
        v-if="goods_plugin.course_supply&&goods_plugin.course_supply.deadline">
        <div >{{goods_plugin.course_supply.deadline}}</div>
      </van-notice-bar>
      <!-- <div class="course-deadline" :class="[fun.isIphoneX() ? 'iphoneXStyle' : '']" v-if="goods_plugin.course_supply&&goods_plugin.course_supply.deadline">{{goods_plugin.course_supply.deadline}}</div> -->
      <van-goods-action class="set-pc-styleLeft" v-if="goods_plugin.course_supply">
        <van-goods-action-icon icon="shop-o" text="首页" @click="gotoUrl('home')" />
        <van-goods-action-icon icon="user-o" text="会员中心" @click="gotoUrl('member')" />
        <van-goods-action-icon icon="chat-o" text="客服" @click="clickChat"/>
        <van-goods-action-button
          type="warning"
          text="开始学习"
          v-if="(goods_plugin.course_supply.is_buy)  && goods_plugin.course_supply.chapter.length > 0"
          @click="gotoUrl('chapterList',{ chapterId:goods_plugin &&  goods_plugin.course_supply&& goods_plugin.course_supply.id,courseId:courseId,sectionId:sectionId,videoId:videoId})"/>
          <van-goods-action-button type="warning" text="立即购买" :disabled="goods_plugin.course_supply.chapter && goods_plugin.course_supply.chapter.length === 0" v-else-if="goods_plugin.course_supply.chapter && goods_plugin.course_supply.chapter.length === 0" />
          <van-goods-action-button type="warning" text="立即购买" :disabled="(fun.isIosOrAndroid() === 'ios') && plugin_setting.yz_course_supply.is_ios_sell == '1'" v-else @click="toOrder"/>
      </van-goods-action>
      <!-- 商品底部导航 -->

      <div style="height: 80px;"></div>

      <!-- 商品详情页图片放大start -->
      <van-image-preview v-model="showBigImg" :images="bigImages" :start-position="imgStart"></van-image-preview>
      <!-- 商品详情页图片放大 end -->
      <cservice-popup :show="show1" :cservice="cservice" :service_mobile="service_mobile" :service_QRcode="service_QRcode" @close="show1 = false"></cservice-popup>
    </div>
  </transition>
</template>

<script>
import course_supply_controller from "./course_supply_controller";
export default course_supply_controller;
</script>

<style scoped>
.section .van-notice-bar {
  width: 100%;
  position: fixed;
  bottom: 50px;
  z-index: 10;
  color: #ff7a0e;
  font-size: 0.75rem;
  height: 1.5rem;
  background-color: rgba(255, 123, 15, 0.2);
}

.section .van-goods-action {
  z-index: 10;
}

.chapter-list .chapter-content .chapter-item:last-child .content {
  border-bottom: none;
}
</style>
<style lang="scss" rel="stylesheet/scss" scoped>
#appMain.pcStyle .van-notice-bar {
  width: 23.4375rem;
}

/* 顶部导航 */
#hoid {
  padding: 0.3125rem;
  width: 1.6rem;
  position: fixed;
  z-index: 2;
  height: 2.25rem;
}

#member {
  padding: 0.3125rem;
  width: 1.6rem;
  position: fixed;
  z-index: 2;
  box-sizing: content-box;
  right: 0;
}

.cart {
  padding: 0.3125rem;
  width: 1.6rem;
  position: fixed;
  z-index: 2;
  box-sizing: content-box;
  right: 2rem;
}

.back {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 100%;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.4);
  text-indent: 0;
  line-height: 1.7rem;
  overflow: hidden;
}

.hoet .back {
  transition: 0.1s;
  background-color: rgba(237, 237, 237, 0);
  color: #1f1f1f;
}

.module-style {
  background: #fff;
  border-radius: 10px;
  margin: 10px;
  overflow: hidden;
}

.pcStyle {
  #hoid {
    width: 375px !important;
  }

  .cart {
    right: 50% !important;
    margin-right: -150px;
  }

  #member {
    right: 50% !important;
    margin-right: -186px;
  }

  .pcStyle_activity {
    .yd-popup-show {
      width: 375px !important;
      right: 50%;
      margin-right: -187.5px;
    }
  }

  .pcStyle_mint {
    width: 375px !important;
    box-sizing: border-box !important;

    #chooser_img {
      width: 5.81rem !important;
    }

    .right {
      margin-left: 8rem !important;
    }
  }

  .pcStyle_width {
    width: 375px !important;
  }

  .pcStyle_ydT {
    width: 375px;
    left: 50% !important;
    margin-left: -187.5px;
  }

  .pcStyle_ydC {
    width: 375px;
    margin: 0 auto;
  }

  #foot {
    width: 375px !important;
  }
}


/* 品牌 */
.brand {
  background-color: #fff;
  padding: 0 0.6rem;
  border-radius: 10px;
  margin: 10px;
  height: 3.125rem;

  .logo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;

    li:first-child {
      display: flex;
      align-items: center;

      .logo_img {
        width: 35px;
        height: 35px;
        border-radius: 5px;
      }
    }

    span {
      font-size: 0.875rem;
      color: #333;
      font-weight: bold;
      text-align: left;
      padding-left: 0.75rem;
      width: 12.5rem;
      overflow: hidden; /* 超出部分隐藏 */
      text-overflow: ellipsis; /* 超出部分显示省略号 */
      white-space: nowrap; /* 规定段落中的文本不进行换行 */
    }

    .return {
      width: 5rem;
      height: 1.5625rem;
      line-height: 1.5625rem;
      text-align: center;
      color: #fff;
      border-radius: 2rem;
      background: #ff9600;
    }
  }
}

/* 品牌end */


/* 群活码 */
.group-code {
  display: flex;
  align-items: center;
  text-align: left;
  background-color: #fff;
  padding: 0.6rem;
  border-radius: 10px;
  margin: 10px;

  .group-code-face {
    width: 2.5rem;
    height: 2.5rem;

    img {
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 50%;
    }
  }

  .group-code-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 2rem;
    padding-right: 1rem;
    padding-left: 0.5rem;
    line-height: 1.125rem;

    .group-code-name {
      font-size: 13px;
      font-weight: bold;
      color: #353535;
    }

    .group-code-desc {
      font-size: 10px;
      color: #6c6c6c;
    }
  }

  .group-code-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.75rem;
    height: 1.5rem;
    line-height: 1.5rem;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    background-color: #ff9600;
    border-radius: 0.75rem;
  }
}

/* 群活码end */

/* 商品详情 */
.pullUp {
  display: flex;
  height: 3.125rem;
  line-height: 3.125rem;
  justify-content: center;
  align-items: center;
  color: #666;
  background: #fff;
  margin: 0.75rem 0 -2.625rem;

  #imgs {
    width: 1rem;
    height: 1rem !important;
    margin: 0 0.5rem 0 0;
  }

  .rotateImg {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transition: transform 0.5s;
  }

  .normalImg {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transition: transform 0.5s;
  }
}

#shopInfo {
  // height: 80vh;
  #tabs {
    #goods_content {
      padding: 0.6rem;
      margin-bottom: 0.625rem;
      background: #fff;

      img {
        max-width: 100%;
      }

      ::v-deep em {
        font-style: italic;
      }
    }
  }
}


/* 商品详情end */

/* 价格说明 */

.price-desc {
  background-color: #fff;
  padding: 0.8rem;
  margin: 10px;
  border-radius: 10px;

  .price-desc-title {
    text-align: left;
    color: #1f1f1f;
    font-weight: bold;
    margin-bottom: 0.8rem;
  }
}

/* 价格说明 */

.pcStyle_ydC {
  width: 375px;
  height: 85%;
  overflow-y: scroll;
  margin: 0 auto;

  &::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
}

.item {
  margin: 0 1rem;
  text-align: left;

  .item-title {
    color: #f14e4e;
    margin: 0.625rem 0;
    font-weight: bold;
  }

  .item-content {
    color: #3a3a3a;
    font-size: 15px;
  }
}

/* 商品参数end */

/* 目录  */
.chapter-list {
  background: #fff;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  margin: 0 10px 10px;

  .title {
    border-bottom: 1px solid #f5f6fa;
    padding: 0 28px 16px 30px;
  }

  .chapter-content {
    padding: 10px;
    border-radius: 10px;
    overflow: hidden;

    .play {
      background: #fd453f;
      border-radius: 3px;
      padding: 0 5px 0 5px;
      display: inline;

      .icon-course_play {
        color: #fff;
      }
    }

    h3 {
      font-size: 15px;
      color: #202020;
      padding: 0 0 0 11px;
    }

    .on {
      color: #fd453f !important;
    }

    .content {
      flex-direction: column;
      padding: 10px 0;
      // padding-bottom: 20px;
      border-bottom: 1px solid #e7eef6;

      h3 {
        width: 100%;
        padding: 0;
        text-align: left;
        font-size: 13px;
        font-weight: 500;
        color: #202020;
      }

      .examine {
        width: 100%;
        padding: 8px 0 0 0;

        .time {
          color: #2a74c1;
          font-size: 11px;

          .icon-course_time {
            padding-right: 8px;
          }
        }

        .try-and {
          font-size: 11px;
          line-height: 11px;
          font-weight: 500;
          border-radius: 5px;
          color: #ff3101;
          padding: 3px 5px;
          background-color: rgba(255, 49, 1, 0.2);
        }
      }
    }

    ::v-deep .van-cell,
    ::v-deep .van-collapse-item__content {
      background: #f6fafd;
    }
  }
}

/* 目录 end */

.lecturer {
  padding: 0.975rem;

  .logo_img {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    margin-right: 0.875rem;
  }

  .lecturer-main {
    flex: 1;
    flex-wrap: wrap;
    flex-direction: column;
    text-align: left;
    overflow: hidden;

    .name {
      margin-right: 0.5rem;
      font-size: 1rem;
      max-width: 86px;
      font-weight: bold;
      color: #242424;
    }

    .lecturer-tag {
      margin: 0 0.75rem 0.375rem 0;
      padding: 0 0.5rem;
      line-height: 1.25rem;
      font-size: 0.75rem;
      color: #fff;
      background: linear-gradient(104deg, #bf863c 0%, #e0b070 100%);
      border-radius: 10px;
    }

    .lecturer-tag:last-child {
      margin-right: 0;
    }

    .line-clamp-1 {
      overflow: hidden;/* 超出部分隐藏 */
      text-overflow: ellipsis;/* 超出部分显示省略号 */
      white-space: nowrap;/* 规定段落中的文本不进行换行 */
    }
  }
}

.course-deadline {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 50px;
  line-height: 24px;
  background: #ffdfbf;
  color: #ff7a0e;
  text-align: left;
}

.iphoneXStyle {
  bottom: 74px;
}

::v-deep .van-sticky {
  margin: 0 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  overflow: hidden;
}

::v-deep .van-sticky--fixed {
  margin: 0;
  border-radius: 0;
}

</style>
